<template>
    <div>
        <div class="messageList">
            <el-container v-if="active !== 3">
                <el-header>完成以下步骤就可以成功开通啦！</el-header>
                <el-steps class="madp-steps" :active="active" finish-status="success">
                    <el-step title="填写企业信息"></el-step>
                    <el-step title="添加客服提交材料"></el-step>
                    <el-step title="配置后台"></el-step>
                </el-steps>
                <el-main>
                    <el-form
                        v-if="active == 0"
                        ref="companyForm"
                        :rules="companyFormRules"
                        :model="companyForm"
                        class="madp-form"
                        label-width="180px"
                    >
                        <el-form-item label="企业名称" prop="name">
                            <el-input
                                v-model.trim="companyForm.name"
                                disabled
                                placeholder="请输入企业名称"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="企业代码" prop="code">
                            <el-input v-model.trim="companyForm.code" placeholder="请输入企业代码"></el-input>
                        </el-form-item>
                        <el-form-item label="企业负责人" prop="leader">
                            <el-input v-model.trim="companyForm.leader" placeholder="请输入企业负责人"></el-input>
                        </el-form-item>
                        <el-form-item label="企业负责人身份证" prop="idNumber">
                            <el-input v-model.trim="companyForm.idNumber" placeholder="请输入企业负责人身份证"></el-input>
                        </el-form-item>
                        <el-form-item label="企业负责人电话" prop="telphone">
                            <el-input v-model.trim="companyForm.telphone" placeholder="请输入企业负责人电话"></el-input>
                        </el-form-item>
                        <el-form-item style="margin-top: 55px">
                            <el-button type="primary" @click="next">下一步</el-button>
                        </el-form-item>
                    </el-form>
                    <el-form v-if="active == 1" label-width="180px">
                        <el-form-item class="madp-imgBox">
                            <!-- 此处二维码为图片假数据 -->
                            <img
                                v-if="StepInfoData.serviceContactUrl"
                                :src="StepInfoData.serviceContactUrl"
                            />
                        </el-form-item>
                        <el-form-item style="margin-top: 55px">
                            <div class="madp-first-save">
                                <el-button type="primary" @click="next">下一步</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                    <el-form
                        v-if="active == 2"
                        ref="configForm"
                        :rules="configFormRules"
                        :model="configForm"
                        class="madp-form"
                        label-width="180px"
                    >
                        <div>
                            <el-row>
                                <el-form-item
                                    label="信息机密公钥:"
                                    style="margin-top: 50px"
                                    prop="publicKey"
                                >
                                    <el-col :span="18">
                                        <el-input
                                            class="madp-textarea"
                                            type="textarea"
                                            disabled
                                            rows="5"
                                            v-model.trim="StepInfoData.rsaPublicKey"
                                        ></el-input>
                                    </el-col>
                                    <el-col :offset="1" :span="4">
                                        <el-button type="primary" class="madp-copyBtn">复制</el-button>
                                    </el-col>
                                </el-form-item>
                            </el-row>
                            <el-row>
                                <el-form-item label="信息机密私钥:" prop="privateKey">
                                    <el-col :span="18">
                                        <el-input
                                            class="madp-textarea"
                                            type="textarea"
                                            disabled
                                            rows="5"
                                            v-model.trim="StepInfoData.rsaPrivateKey"
                                        ></el-input>
                                    </el-col>
                                    <el-col :offset="1" :span="4">
                                        <el-button type="primary" class="madp-copyBtn">复制</el-button>
                                    </el-col>
                                </el-form-item>
                            </el-row>
                            <el-form-item label="可信IP地址:" prop="protocol">
                                <el-input
                                    class="madp-input"
                                    placeholder="输入多个ip用时，用 “;” 隔开~"
                                    v-model.trim="configForm.protocol"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="会话存档Seccret:" prop="sessionSecret">
                                <el-input
                                    class="madp-input"
                                    v-model.trim="configForm.sessionSecret"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="公钥版本号:" prop="publicKeyVersion">
                                <el-input
                                    class="madp-input"
                                    v-model.trim="configForm.publicKeyVersion"
                                ></el-input>
                            </el-form-item>
                            <el-form-item prop="sessionStatus" label="会话存档状态:">
                                <el-switch v-model="configForm.sessionStatus"></el-switch>
                            </el-form-item>
                            <!-- <el-form-item>
                                <el-button type="primary"
                                           class="madp-second-save"
                                           @click="saveFn">保存</el-button>
                            </el-form-item>-->
                        </div>
                        <el-form-item style="margin-top: 55px">
                            <el-button type="primary" @click="next">下一步</el-button>
                        </el-form-item>
                    </el-form>
                </el-main>
            </el-container>
            <stepComplete v-else />
        </div>
    </div>
</template>
<script>
import stepComplete from "./step-complete";
import { getStore, setStore } from "@/util/store";
import {
    stepInfo, // 步骤页面-企业信息查询
    stepStore, // 步骤页面-企业信息添加
    stepService, // 步骤页面-添加客服提交资料
    stepConfig, // 步骤页面-后台配置
    page, // 会话内容存档列表
    msgConfig // 企业信息查看
} from "@/api/enterprise/message-archiving.js";
export default {
    name: "messageList",
    components: { stepComplete },
    data() {
        return {
            value: false,
            active: 0,
            currentStep: "one",
            StepInfoData: {},
            companyForm: {
                name: "", //企业名称
                code: "", //企业代码
                leader: "", //企业负责人
                idNumber: "", //身份证号
                telphone: "" //电话号码
            },
            configForm: {
                protocol: "", //可信IP地址
                sessionSecret: "", //会话存档Seccret
                publicKeyVersion: "", //公钥版本号
                sessionStatus: false //会话存档状态
            },
            companyFormRules: {
                name: [
                    {
                        required: true,
                        message: "请输入企业名称",
                        trigger: "blur"
                    },
                    {
                        min: 6,
                        max: 20,
                        message: "长度在 8 到 20个字符",
                        trigger: "blur"
                    }
                ],
                code: [
                    {
                        required: true,
                        message: "请输入企业代码",
                        trigger: "blur"
                    }
                ],
                leader: [
                    {
                        required: true,
                        message: "请输入企业负责人",
                        trigger: "blur"
                    },
                    {
                        min: 2,
                        max: 4,
                        message: "长度在 2 到 4个字符",
                        trigger: "blur"
                    }
                ],
                idNumber: [
                    {
                        required: true,
                        message: "请输入身份证号",
                        trigger: "blur"
                    }
                ],
                telphone: [
                    {
                        required: true,
                        message: "请输入电话号码",
                        trigger: "blur"
                    }
                ]
            },
            configFormRules: {
                protocol: [
                    {
                        required: true,
                        message: "请输入IP地址",
                        trigger: "blur"
                    }
                ],
                sessionSecret: [
                    {
                        required: true,
                        message: "请输入会话存档Seccret",
                        trigger: "blur"
                    }
                ],
                publicKeyVersion: [
                    {
                        required: true,
                        message: "请输入公钥版本号",
                        trigger: "blur"
                    }
                ],
                sessionStatus: [
                    {
                        required: true,
                        message: "状态不可为空值",
                        trigger: "blur"
                    }
                ]
            }
        };
    },
    mounted() {
        this.getStepInfo();
        this.companyForm.name = getStore({ name: "corps" }).corpName || ""; //企业名称
    },
    methods: {
        getStepInfo() {
            stepInfo().then((res) => {
                if (res.data && res.data.code == 0) {
                    this.active = +res.data.data.chatApplyStatus - 1;
                    setStore({ name: "StepInfoData", content: res.data.data });
                    // if(res.data.data.serviceContactUrl !== ''){
                    //     this.imgUrl = res.data.data.serviceContactUrl
                    // }
                    this.StepInfoData = res.data.data;
                }
            });
        },
        //保存
        save() {
            this.$refs.companyForm.validate((valid) => {
                if (valid) {
                    //身份证号验证
                    let reg =
                        /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/;
                    if (reg.test(this.companyForm.idNumber) === false) {
                        alert("身份证输入不合法");
                        return;
                    }
                    //手机号验证
                    let regTel = /(^1[0-9]{10}$)/;
                    if (regTel.test(this.companyForm.telphone) === false) {
                        alert("手机号输入不合法");
                        return;
                    }

                    let data = {
                        chatAdmin: this.companyForm.leader,
                        chatAdminIdcard: this.companyForm.idNumber,
                        chatAdminPhone: this.companyForm.telphone,
                        socialCode: this.companyForm.code
                    };
                    stepStore(data).then((res) => {
                        if (res.data && res.data.code == 0) {
                            this.$message({
                                message: "提交成功",
                                type: "success"
                            });
                            this.getStepInfo();
                            // this.active = +res.data.data.chatApplyStatus-1;
                        }
                    });
                }
            });
        },
        //步骤3的保存按钮
        saveFn() {
            this.$refs.configForm.validate((valid) => {
                if (valid) {
                    let data = {
                        chatRsaKey: JSON.stringify({
                            public_key: this.StepInfoData.rsaPublicKey,
                            private_key: this.StepInfoData.rsaPrivateKey,
                            version: this.configForm.publicKeyVersion
                        }),
                        chatSecret: this.configForm.sessionSecret,
                        chatStatus: this.configForm.sessionStatus ? 1 : 0,
                        id:
                            this.StepInfoData.id ||
                            getStore({ name: "StepInfoData" }).id,
                        whiteServerIps: this.configForm.protocol
                            .replace("；", ";")
                            .split(";")
                    };
                    stepConfig(data).then((res) => {
                        if (res.data && res.data.code == 0) {
                            this.$message({
                                message: "提交成功",
                                type: "success"
                            });
                            this.getStepInfo();
                        }
                    });
                }
            });
        },
        next() {
            if (this.active == 0) {
                this.save();
            } else if (this.active == 1) {
                let id =
                    this.StepInfoData.id ||
                    getStore({ name: "StepInfoData" }).id;
                stepService(id).then((res) => {
                    if (res.data && res.data.code == 0) {
                        this.getStepInfo();
                    }
                });
            } else if (this.active == 2) {
                this.saveFn();
            }
            // this.active++;
            // if (this.active > 2) {
            //     this.active = 0;
            // }
        }
    }
};
</script>
<style lang="scss" scoped>
// .messageList {
//     padding:0 20px;
// }
.el-header {
    border-radius: 8px;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    background: #fff;
    text-align: center;
    line-height: 60px;
}
.madp-steps {
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    margin-top: 10px;
    padding: 40px 200px;
    // padding-top: 40px;
    background: #fff;
}
.el-main {
    background: #fff;
}
.madp-form {
    margin-right: 50px;
}
.madp-imgBox {
    width: 90%;
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
        margin: 0;
        width: 200px;
        height: 200px;
    }
}

// .el-input,
// .madp-textarea {
//     width: 85%;
// }
// .madp-input,
// .el-switch,
// .madp-textarea {
//     display: flex;
// }
// .madp-copyBtn {
//     position: absolute;
//     right: 5%;
//     bottom: 0;
// }
// .madp-first-save {
//     position: absolute;
//     bottom: 10%;
//     right: 10%;
// }
// .madp-second-save {
//     position: absolute;
//     bottom: 10%;
//     right: 15%;
// }
</style>
